<template>
    <div class="main">
        <div class="menu-box main-width">
            <div class="menu-list f2" id="menu-list">
                <div class="menu-item" :class="{active:menu.Home}" @click="$router.push('/')">{{ $t('menu.home') }}</div>
                <div class="menu-item" :class="{active:menu.About}" @click="$router.push('/about')">{{ $t('menu.about') }}</div>
                <div class="menu-item" :class="{active:menu.BusinessArea}" @click="$router.push('/businessArea')">{{ $t('menu.area') }}</div>
                <div class="menu-item" :class="{active:menu.ExpertTeam}" @click="$router.push('/expertTeam')">{{ $t('menu.team') }}</div>
                <div class="menu-item" :class="{active:menu.NewsCenter}" @click="$router.push('/newsCenter')">{{ $t('menu.news') }}</div>
                <div class="menu-item" :class="{active:menu.LegalWorks}" @click="$router.push('/legalWorks')">{{ $t('menu.book') }}</div>
                <div class="menu-item" :class="{active:menu.ClassicCases}" @click="$router.push('/classicCases')">{{ $t('menu.case') }}</div>
                <div class="menu-item" :class="{active:menu.Recruitment}" @click="$router.push('/recruitment')">{{ $t('menu.joinUs') }}</div>
                <div class="menu-item" :class="{active:menu.ContactUs}" @click="$router.push('/contactUs')">{{ $t('menu.contactUs') }}</div>
            </div>
           <div class="language">
                <div @click="changeLanguage('zh')">中文</div>
				<div @click="changeLanguage('en')">English</div>
            </div>
        </div>
    </div>

</template>

<script>
import {onMounted} from "vue";
import {useRouter} from 'vue-router'

export default {
    name: "menu",
   data(){
      return{
        menu:{
          Home:false,
          About:false,
          BusinessArea:false,
          ExpertTeam:false,
          NewsCenter:false,
          LegalWorks:false,
          AllDetails:false,
          ClassicCases:false,
          Recruitment:false,
          ContactUs:false,
          SearchResult:false,
        }
      }
   },
    props: {
        active: {
            type: String,
           // required: true,
            default: ''
        }
    },
    methods:{
        changeLanguage(value){
            this.$i18n.locale=value
        }
    },

   mounted() {
      for(let x in this.menu){
        this.menu[x] = false;
      }
     this.menu[this.$route.name] = true;
   }
}
</script>

<style lang="less">
#app{
    .menu-box{
        .menu-list{
            .active {
                border-color: #E45338;
            }
        }
    }
}
.main{
    background: rgba(0, 0, 0, 0.33);
}
.menu-box {
    //width: calc(100% - 720px);
    color: #FFFFFF;
    // border-bottom: 2px solid rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    //padding: 0 360px;
	width: 1200px;
    z-index: 1995;
    height: 88px;


    .language {
        display: flex;
        flex-direction: row;

        div {
            cursor: pointer;
            margin: 20px 20px 0 20px;
            padding: 10px;
        }
    }

    .menu-list {
        display: flex;
        flex-direction: row;
        width: 80%;
        justify-content: space-between;
		margin: 0 auto;
        .menu-item {
            color: #FFFFFF;
            cursor: pointer;
            padding: 5px;
			font-size: 18px;
            border-bottom: 3px solid rgba(0,0,0,0);
        }

        .menu-item:hover {
            border-bottom: 3px solid #E45338;
        }
    }
}

@media screen and (min-width: 1200px) and (max-width: 1700px) {
    .menu-box .menu-list .menu-item {
        margin: 5px 5px 0 5px;
        padding: 5px 0;
    }
}


@media screen and (min-width: 992px)  and (max-width: 1200px) {
    #app .first-box  .menu-box {
		width: 992px;
    }

	.menu-box .language{
		display: none;
	}
}
@media screen and (min-width:800px)  and (max-width: 992px) {
    #app .first-box  .menu-box {
		width: 800px;
    }
	.menu-box .menu-list{
		width: 90%;
	}
	.menu-box .language{
		display: none;
	}
}
@media screen and (min-width:0px) and (max-width:680px) {
  .menu-box {
    display: none;
  }
}

@media screen and (min-width: 480px) {

}
</style>

